<template>
    <div class="content">
        
        <div class="dome-mask">
            <img src="../assets/images/dog1.jpg"/>
            <div class="mask-box">修狗过渡效果演示</div>
        </div>

        <div class="dome-triangle">
            <span>三角形旋转过渡效果</span>
            <img src="../assets/images/triangle.png" style="width: 16px;height: 10px;"/>
            
            <div class="dome-t-cont">
                这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
            </div>
        </div>

    </div>
</template>

<script setup>

</script>

<style scoped>
.content {
    width: 100%;
    height: 1200px;
    padding: 100px 120px;
    background-color: #000000;
}
.dome-triangle {
    cursor: pointer;
    margin: 60px 0 0 0;
}
.dome-triangle span {
    font-size: 14px;
    color: #FFFFFF;
    margin: 0 8px 0 0;
}
.dome-triangle img {
    transform: rotate(-90deg);
    transition: all .3s;
}
.dome-triangle:hover img {
    transform: rotate(0);
}
.dome-triangle:hover .dome-t-cont {
    height: 100px;
}
.dome-t-cont {
    font-size: 14px;
    color: #AAAAAA;
    width: 160px;
    height: 0;
    overflow: hidden;
    margin: 12px 0 0 0;
    transition: all .3s;
}

.dome-mask {
    cursor: pointer;
    width: 300px;
    height: 200px;
    background-color: #FFFFFF;
    overflow: hidden;
    position: relative;
}
.dome-mask img {
    width: 100%;
    height: 100%;
    transition: all .3s;
    z-index: 1;
}
.dome-mask:hover img {
    width: 120%;
    height: 120%;
    transform: translate(-10%, -10%);
}
.mask-box {
    width: 100%;
    height: 100%;
    background-color: #000000AD;
    color: #FFFFFF;
    text-align: center;
    line-height: 200px;
    opacity: 0;
    transition: all .3s;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.dome-mask:hover .mask-box {
    opacity: 1;
}

</style>